<template>
  <!-- <div> -->
  <drawer title="专家审核详情" :show.sync="drawerShow" pos="right" tran="overlay" @on-hide="onHide">
    <div class="layout auditExpertDetails" slot="drawer">
      <div v-if="detailsType === 'list'">
        <el-row :gutter="24" style="margin:20px 0;">
          <el-col :span="8">
            <div class="list-item">分析师名称：
              <span>{{recordData.expertName}}</span>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="list-item">真实姓名：
              <span>{{recordData.realName}}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="list-item">手机号：
              <span>{{recordData.phone}}</span>
            </div>
          </el-col>
        </el-row>
        <div>
          <el-table v-loading="loading" ref="multipleTable" border :data="recordData.list">
            <el-table-column property="auditor" label="审核账户" show-overflow-tooltip>
            </el-table-column>
            <el-table-column property="result" label="结果" show-overflow-tooltip>
            </el-table-column>
            <el-table-column property="reason" label="原因" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="审核时间" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-if="detailsType === 'details'">
        <el-card class="box-card">
          <el-row :gutter="24" style="margin:15px 0;">
            <el-col :span="10">
              <div class="list-item">分析师名称：
                <span>{{curData.expertName}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="list-item">真实姓名：
                <span>{{curData.realName}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin:15px 0;">
            <el-col :span="10">
              <div class="list-item">擅长领域：
                <span>{{curData.domain}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="list-item">风格标签：
                <span></span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin:15px 0;">
            <el-col :span="24">
              <div class="list-item">
                <span class="align-top">专家头像：</span>
                <img :src="$S.path + curData.expertAvatar" width="100px" height="100px" alt="">
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" style="margin:15px 0;">
            <el-col :span="24">
              <div class="list-item">
                <el-row :gutter="24" style="margin:15px 0;">
                  <el-col :span="4">
                    专家介绍：
                  </el-col>
                  <el-col :span="18">
                    {{curData.expertDesc}}
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>联系方式</span>
          </div>
          <div>
            <el-row :gutter="24" style="margin:15px 0;">
              <el-col :span="24">
                <div class="list-item">联系地址：
                  <span>{{curData.contactProvince+curData.contactCity+curData.contactDistrict+curData.contactDetail}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin:15px 0;">
              <el-col :span="24">
                <div class="list-item">所在地：
                  <span>{{curData.locusProvince+curData.locusCity+curData.locusDistrict+curData.locusDetail}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin:15px 0;">
              <el-col :span="24">
                <div class="list-item">
                  <span class="align-top">个人：</span>
                  <img :src="$S.path + curData.qrcode" width="100px" height="100px" alt="">
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin:15px 0;">
              <el-col :span="10">
                <div class="list-item">所属公司：
                  <span>{{curData.company}}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="list-item">个人专属地址：
                  <span>{{curData.personalAddress}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin:15px 0;">
              <el-col :span="10">
                <div class="list-item">微信号：
                  <span>{{curData.wechat}}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="list-item">QQ号：
                  <span>{{curData.qq}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin:15px 0;">
              <el-col :span="10">
                <div class="list-item">手机号：
                  <span>{{curData.phone}}</span>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="list-item">邮箱：
                  <span>{{curData.email}}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>身份认证</span>
          </div>
          <div>
            <el-row :gutter="24" style="margin:15px 0;">
              <el-col :span="24">
                <div class="list-item">身份证号：
                  <span>{{curData.certifyNumber}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin:15px 0;">
              <el-col :span="24">
                <div class="list-item">
                  <span class="align-top">上传身份证：</span>
                  <img :src="$S.path + curData.certifyPic" width="100px" height="100px" alt="">
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin:15px 0;">
              <el-col :span="24">
                <div class="list-item">
                  <span>认证资质：</span>
                  <span>{{curData.position}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24" style="margin:15px 0;">
              <el-col :span="24">
                <div class="list-item">
                  <span class="align-top">上传执照资质：</span>
                  <img :src="$S.path + curData.positionPic" width="100px" height="100px" alt="">
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-form>
          <el-form-item label="原因">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入" v-model="reason">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="drawer-footer">
      <el-button v-if="curData.status !== '0'" class="pull-right" @click="cancelEvent()">取消</el-button>
      <el-button v-if="curData.status === '0'" class="pull-right" @click="confirmEvent('5')">审核不通过</el-button>
      <el-button v-if="curData.status === '0'" type="primary" @click="confirmEvent('10')">审核通过</el-button>
    </div>
  </drawer>
  <!-- </div> -->
</template>
<script>
import * as api from '@/utils/api'
import drawer from '@/components/VueDrawer'
export default {
  props: {
    drawerShow: false,
    detailsType: '',
    curData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  components: {
    drawer
  },
  data() {
    return {
      loading: false,
      reason: '',
      recordData: {}
    }
  },
  watch: {
    drawerShow(val) {
      this.reason = ''
      if (val && this.detailsType === 'list') {
        this.getucAuditExpertRecord()
      }
    }
  },
  destroyed() {
    // if appendToBody is true, remove DOM node after destroy
    if (this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el)
    }
  },
  methods: {
    async getucAuditExpertRecord() {
      this.loading = true
      const res = await api.getucAuditExpertRecord({ id: this.curData.id })
      this.recordData = res
      this.loading = false
    },
    async modifyucAuditExpert(curStatus) {
      await api.modifyucAuditExpert({
        id: this.curData.id,
        status: curStatus,
        reason: this.reason
      })
    },
    cancelEvent() {
      this.$emit('cancel-event')
    },
    confirmEvent(status) {
      if (status === '5' && !this.reason.length) {
        this.$notify({ title: '请填写审核不通过原因', type: 'error', duration: 2000 })
        return false
      }
      this.$confirm(`确认${status !== '10' ? '审核通过' : '审核不通过'}吗`, { type: 'warning' }).then(() => {
        this.modifyucAuditExpert(status)
      }).catch(() => {
        return false
      })
      this.$emit('confirm-event')
    },
    onHide() {
      this.$emit('cancel-event')
    }
  }
}
</script>
<style lang="scss" scoped>
.auditExpertDetails {
  .avatar {
    display: inline-block;
    border-radius: 50%;
    border: 1px dashed #ccc;
  }
  .box-card {
    margin-bottom: 15px;
  }
  .list-item {
    font-size: 13px;
    color: #666;
  }
  .align-top {
    vertical-align: top;
  }
  img {
    display: inline-block;
  }
}
</style>
